<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8" />


    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>科教招新系统运营后台</title>





    <!-- 引入框架 -->

    <!-- Vue + jQuery + ElementUI + CloudBase -->

    <!-- Vue -->

    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.7.8"></script> -->

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <!-- jQuery -->

    <script src="./static/js/jquery.js"></script>

    <!-- ElementUI -->

    <!-- 引入样式 -->

    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />

    <!-- 引入组件库 -->

    <script src="./static/js/element-ui.js"></script>

    <!-- 云开发Web SDK -->

    <script src="./static/js/cloud.js"></script>

    <!--  特点：

    1.直接在Windows对象上挂载cloud对象，在使用时直接cloud即可

        配置过程

        1.使用new cloud创建对象，传入对应的资源id和APPID

        2.使用cloud对象中的inti方法进行初始化

-->

    <link rel="stylesheet" href="./static/css/usersmanage.css">

    <script src="./static/js/js.cookie.min.js"></script>

    <style>
        .checkOn {
            background-color: rgb(255, 255, 255);
        }
    </style>



</head>



<body style="background: rgb(221, 225, 234);">



    <div id='root' v-loading="isLoading">

        <!-- 正文内容 -->

        <div class="rightRound"></div>

        <div class="rightSmallRound"></div>

        <div class="leftRound"></div>

        <div class="navigate">

            <a class="span1" href="membermanagement.html">成员管理</a>

            <a class="span2" href="#">用户管理</a>

        </div>

        <div class="context">

            <div class="leftContext">

                <div class="leftContextHeader">

                    <div style="width:50%;display: flex;align-items: center;">
                        <el-tooltip class="item" effect="dark" content="插画作者：朱晓彤" placement="top-start">
                            <image class="doll" src="./static/images/keke.png">
                        </el-tooltip>
                        </image>

                        <span class="userListText">用户列表</span>

                    </div>

                    <div style="width: 50%;display: flex;align-items: center;justify-content: space-between;">

                        <div class="flexCenter refresh" @click="getMessage">

                            <span class="refreshText">刷新</span>

                            <image class="refreshIcon" src="./static/images/refresh.svg"></image>

                        </div>

                        <!-- 搜索区域 -->

                        <div class=" inputBox ">
                            <!-- 阻止表单自动填写 -->
                            <input type="password" hidden  autocomplete="new-password">

                            <input type="text" placeholder="openid / 姓名" id="searchInfo" v-model="keyword">
                            <image class="searchIcon " @click="searchUser " src="https://636c-cloud1-8g54d6xb74e96e7d-1311924947.tcb.qcloud.la/images/%E6%90%9C%E7%B4%A2.svg?sign=d416a60168e68c98bef4026732124e8f&t=1660894534 " mode="widthFix
                                " lazy-load="false " binderror=" " bindload=" ">

                            </image>

                        </div>



                    </div>

                </div>



                <div class="ContextTable " style="overflow: auto; ">



                    <table id="table " cellspacing="20 " style="overflow:auto; width: 100%; position: relative; ">

                        <thead class="tableHeader ">

                            <tr>

                                <th style="width: 20%; ">openid</th>

                                <th style="width: 20%; ">姓名</th>

                                <th style="width: 20%; ">隶属部门</th>

                                <th style="width: 20%; ">职位</th>

                                <!-- 默认状态隐藏 -->

                                <th v-if="progressInfo=='inputMessage' ?true:false ">操作</th>



                            </tr>

                        </thead>

                        <tbody>

                            <template v-for="(p,index) of list ">

                                <tr style="height: 20% ">

                                    <td>{{p._openid}}</td>

                                    <td>{{p.realName}}</td>

                                    <td>{{p.department}}</td>

                                    <td>{{p.Position}}</td>

                                    <!--style=" 默认状态隐藏 -->

                                <td class="manage" v-if="progressInfo=='inputMessage'?true:false">

                                    <!-- <button @click="changeUser(p._openid)"></button> -->

                                    <button @click="alertWindows(p._openid,p.realName,p.department,p.Position)" style="background-color:rgb(234, 234, 234);

                                            border-radius:5px;

                                            border:1px solid;width: 45px;padding:5px;">修改</button>

                                    <button @click="deleteUser(p._openid,p.realName,index)" style="margin-left: 5px;width: 45px;padding:5px;border-radius: 5px;color: #fff;background-color: rgb(255, 110, 110);border:0px

                                    ">删除</button>

                                </td>

                                </tr>

                                </template>



                            <!-- 一个案例 -->

                            <!-- <tr>

                                <td>o4HIE4xePfxmP7ABBBvDafNJb6lQ</td>

                                <td>黄伟聪</td>

                                <td>网络研发部</td>

                                <td>副部长</td>

                                <td>

                                </td>

                            </tr> -->

                        </tbody>

                    </table>

                </div>



            </div>

            <div class="rightContext " style="display: flex; flex-direction:column;align-items: center;">

                <!-- 头像 -->

                <div style="display: flex; flex-direction:column;align-items: center; margin-bottom: 30px;">

                    <image class="avatarImg" src="./static/images/blackboy.svg" mode="widthFix" style="width: 56px">

                        <span style="font-size: 14px;">{{personInfo.realName}}</span>

                    </image>

                </div>

                <!-- 功能显示 -->

                <div style="margin-bottom: 40px;color: rgb(51, 44, 122);" id="manageInfo">新增运营用户</div>

                <!-- 进度显示 -->

                <div class=" rightMenu" style="margin-bottom: 20px;display: flex;justify-content: space-between;align-items: center;">

                    <ul id="authority1" :class="authority==1?'checkOn':'normal'" style='padding: 4px;border-radius: 4px;margin-left: 5px;'>

                        <image class="" src="./static/images/checkAuthority.svg" mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload="" style="vertical-align: middle">

                        </image> 验证权限

                    </ul>

                    <ul id="authority2" :class="authority==2?'checkOn':'normal'" style='padding: 4px;border-radius: 4px; '>

                        <image class="" src="./static/images/inputMessage.svg" mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload="" style="vertical-align: middle">

                        </image> 填写信息

                    </ul>

                    <ul id="authority3" :class="authority==3?'checkOn':'normal'" style='padding: 4px;border-radius: 4px; '>

                        <image class="" src="./static/images/addSuccess.svg" mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload="" style="vertical-align: middle">



                        </image> 添加完成

                    </ul>

                </div>

                <!-- 操作区域 -->

                <!-- 密码验证区域 -->

                <template v-if="progressInfo=='authority'?true:false">

                    <div

                        style="height: 38%;display: flex;flex-direction: column;justify-content: space-around;align-items: center;">



                        <div>需要最高权限密码</div>

                        <div style="background: rgb(255, 255, 255);

                    border-radius: 5px;margin-top: -20%;">



                            <div class="flexCenter authorityInput">

                                <image class="passwordImg" src="./static/images/lock.svg" mode="widthFix"

                                    lazy-load="false" binderror="" bindload="" @click="setPassword">

                                </image>

                                <input type="password"

                                    style='width:80%;height:80%;margin-left:12px;border: none;outline: none;;'

                                    placeholder="password" class="passwordInput" @keyup.enter="verifyPassword">

                            </div>

                        </div>

                    </div>

                    <div class="Button " style="width:90%;display: flex;justify-content: space-around;">

                        <button class="button" @click="resetPasswordInput"

                            style="background-color: rgb(255, 255, 255);color: rgb(129, 129, 129);box-shadow: 3px 2px 3px rgb(255, 255, 255);">重置</button>

                        <button @click="verifyPassword"

                            style="background-color: rgb(56, 41, 122);color: rgb(255, 255, 255);">确定</button>

                    </div>

                </template>

                <!-- 添加用户 -->

                <template v-if="progressInfo=='inputMessage'?true:false">

                    <div style="margin-bottom: 30px" class="inputInfo">

                        <div><span>姓名</span> <input type="text" id="name" placeholder="成员真实姓名" v-model="inputrealName">

                        </div>

                        <div><span>_openid</span><input type="text" id="_openid" placeholder="自定义"

                                v-model="inputopenid"></div>

                        <div><span>密码</span><input v-model="inputpassword" type="text" id="password"

                                placeholder="不少于8位字符">

                        </div>

                        <div><span>确认密码</span><input v-model="confirmPassword" type="text" id="confirmPassword"

                                placeholder="不少于8位字符"></div>

                        <!-- 提示信息 -->

                        <div style="height: 1%;"><span id="Tip"></span></div>

                        <div><span>隶属部门</span><select name="" id="department" class="selectBox"

                                v-model="inputdepartment">

                                <option value="" style="display: none"></option>

                                <option value="网络研发部">网络研发部</option>

                                <option value="秘书处">秘书处</option>

                                <option value="UI设计部">UI设计部</option>

                                <option value="PC技术部">PC技术部</option>

                                <option value="宣传部">宣传部</option>

                                <option value="动画部">动画部</option>

                                <option value="新媒体运营">新媒体运营</option>

                                <option value="影视部">影视部</option>

                            </select></div>

                        <div><span>职位</span><select name="" id="Position" class="selectBox" v-model="inputPosition">

                                <option value="" style="display: none"></option>

                                <option value="正部长">正部长</option>

                                <option value="副部长">副部长</option>

                            </select></div>

                        <div><span>email</span> <input type="text" id="email" placeholder="email" v-model="inputemail">

                        </div>



                    </div>

                    <div class="Button " style="width:90%;display: flex;justify-content: space-around;">

                        <button class="button" @click="resetInputMessage"

                            style="background-color: rgb(255, 255, 255);color: rgb(129, 129, 129);box-shadow: 3px 2px 3px rgb(255, 255, 255);">重置</button>

                        <button @click="addUsers"

                            style="background-color: rgb(56, 41, 122);color: rgb(255, 255, 255);">确定</button>

                    </div>

                </template>

                <!-- 成功 -->

                <template v-if="progressInfo=='success'?true:false">

                    <div

                        style="height: 80%;display: flex;flex-direction: column;justify-content: space-around;align-items: center;">



                        <image src="./static/images/success.svg" mode="widthFix" style="width:80%">

                        </image>



                        <div style="color: rgb(51, 44, 122);">添加成功</div>



                        <button @click="Tab2"

                            style="background-color:rgb(56, 41, 122);height: 10%; width: 90%;font-weight: 700;color: rgb(255, 255, 255);">继续添加</button>

                    </div>

                </template>

            </div>

        </div>





        <!-- 弹窗 -->

        <div id="myModal" class="modal" v-show="showModal">

            <!-- 弹窗内容 -->

            <div class="modal-content">

                <div class="modal-header">

                    <span class="close" @click="showModal=false">&times;</span>

                    <h2>修改用户信息</h2>

                </div>

                <div class="modal-body">

                    <div><span>_openid:</span>{{openid}}</div>

                    <div><span>姓名:</span> <input type="text" v-model="realName" class="windowsInput"></div>

                    <div><span>隶属部门:</span>

                        <select v-model="department" class="windowsInput">

                            <option value="" style="display: none"></option>

                            <option value="网络研发部">网络研发部</option>

                            <option value="秘书处">秘书处</option>

                            <option value="UI设计部">UI设计部</option>

                            <option value="PC技术部">PC技术部</option>

                            <option value="宣传部">宣传部</option>

                            <option value="动画部">动画部</option>

                            <option value="新媒体运营">新媒体运营</option>

                            <option value="影视部">影视部</option>

                        </select>

                    </div>

                    <div><span>职位:</span>

                        <select name="" v-model="Position" class="windowsInput">

                            <option value="" style="display: none"></option>

                            <option value="正部长">正部长</option>

                            <option value="副部长">副部长</option>

                        </select>



                    </div>

                    <button @click="changUser" style="height: 30px;font-weight: 700;">确定修改</button>

                </div>

                <div class="modal-footer">

                    <p style="text-align: right;">@By——网络研发部</p>

                </div>

            </div>



        </div>

    </div>



</body>

<scrri>



    <script>
        Vue.prototype.Cookie = window.Cookies



        const Max_Get = 20 //一次性最多获取的云数据库的数量

        //将微信挂载在Window上的cloud挂载到vue实例上

        const c = window.cloud

        Vue.prototype.cloud = c

        Vue.config.productionTip = false //阻止vue在启动时生成生产提示

        Vue.config.devtools = true;

        const vm = new Vue({

            el: '#root',

            data() {

                return {

                    progressInfo: 'authority',

                    //inputMessage输入信息

                    usersInfo: [], //用户对象.

                    password: '', //弹窗的密码

                    inputpassword: '', //输入的密码

                    confirmPassword: '', //确认密码

                    openid: '', //保存的临时

                    inputopenid: '',

                    realName: "",

                    inputrealName: '', //保存的输入用户名

                    department: "网络研发部",

                    inputdepartment: '网络研发部', //输入的部门

                    email: '',

                    inputemail: '',

                    inputPosition: '',

                    Position: '',

                    keyword: '',

                    list: [],

                    personInfo: {}, //保存的cookie数据对象,

                    authority: 1, //控制 显示转态,

                    showModal: false,

                    isLoading: false, //控制整个窗口是否显示加载

                }

            },

            methods: {

                renewList() {

                    this.list = this.usersInfo.filter((p) => {

                        return ((p.realName ? (p.realName.indexOf(val) !== -1) : null) || (p.Position ? (p.Position.indexOf(val) !== -1) : null) || (p._openid ? (p._openid.indexOf(val) !== -1) : null))

                    })

                },

                checkCookie() {

                    // 如果存在cookie

                    if (this.Cookie.get("personInfo")) {

                        let info = JSON.parse(this.Cookie.get("personInfo"));

                        if (info) {

                            // console.log("用户已经登录");

                            // console.log("本地cookie为");

                            // console.log(info);

                            //对cookie内容进行校验

                            console.log(info._openid);

                            this.db.collection("operationUsers").where({

                                _openid: info._openid

                            }).get().then(res => {

                                //使用密码进行判断

                                if (res.data[0].webPassword == info.webPassword) {

                                    console.log("cookie正确");

                                    this.personInfo = info



                                } else {



                                    this.$message({

                                        message: '请勿盗用他人cookie',

                                        type: 'error'

                                    });

                                    location.href = "./index.html"

                                }

                            })

                        } else {

                            console.log("用户未登录");

                            location.href = "./index.html"

                            // let personInfo={a:1,b:2}

                            // let jsontoString=JSON.stringify(personInfo)

                            // this.Cookie.set("personInfo",jsontoString,{expires:1})

                        }

                    } else {



                        this.$message({

                            message: '请登录',

                            type: 'warning'

                        });

                        location.href = './index.html'

                    }



                },

                //配置微信

                async initWx() {

                    //创建新的cloud实例

                    var c1 = new this.cloud.Cloud({

                        identityless: true,

                        // 资源方 AppID 填自己的

                        resourceAppid: 'wx96f760966921f98a',

                        // 资源方环境 ID	填自己的

                        resourceEnv: 'cloud1-8g54d6xb74e96e7d'

                    })

                    //初始化,使用await将异步转化为同步

                    await c1.init()

                    console.log('初始化完成');

                    this.cloud = c1

                    this.db = this.cloud.database()

                },

                resetInputMessage() {

                    this.inputrealName = ''

                    this.inputopenid = ''

                    this.inputpassword = ''

                    this.confirmPassword = ''

                    this.inputdepartment = ''

                    this.inputPosition = ''



                },

                //认证界面

                Tab1() {

                    this.progressInfo = 'authority'

                    console.log("点击了");

                    this.authority = 1

                },

                //填写信息界面

                Tab2() {

                    $("#password").val("")

                    // $("#confirmPassword").val("")

                    this.progressInfo = "inputMessage";

                    this.authority = 2;



                    // $("#authority1").css('background-color', '')

                    // $("#authority2").css('background-color', 'rgb(255,255,255)')

                    // $("#authority3").css('background-color', '')



                },

                // 认证成功界面

                Tab3() {

                    this.progressInfo = "success";

                    this.authority = 3

                    // $("#authority1").css('background-color', '')

                    // $("#authority2").css('background-color', '')

                    // $("#authority3").css('background-color', 'rgb(255,255,255)')

                },

                setPassword() {

                    if ([$('.passwordInput').attr('type')] == 'password') {

                        $('.passwordInput').attr('type', 'text')

                        $('.passwordImg').attr('src', '/static/images/unlock.svg')



                    } else {

                        $('.passwordInput').attr('type', 'password');

                        $('.passwordImg').attr('src', '/static/images/lock.svg')



                    }

                },

                //重置密码框

                resetPasswordInput() {

                    $('.passwordInput').val('');

                },

                //验证密码吗

                async verifyPassword() {

                    var input = $('.passwordInput').val();

                    console.log(input);

                    if (input) {

                        // 调用云函数进行验证

                        await this.cloud.callFunction({

                            name: 'verifyPassword',

                            data: {

                                input: input

                            },

                            success: res => {

                                console.log(res);

                                if (res.result.result == 0) {

                                    console.log('认证成功');

                                    this.$message({

                                        type: 'success',

                                        message: "认证成功"

                                    })

                                    this.Tab2();

                                } else {

                                    console.log("认证失败");



                                    this.$message({

                                        type: 'error',

                                        message: "密码错误，请联系管理人员获取正确密码"

                                    })

                                }

                            },

                            fail: error => {

                                console.log(error);

                            }



                        })

                    } else {



                        this.$message({

                            message: '认证密码不能为空',

                            type: 'error'

                        });

                    }







                },



                // 获取用户信息

                async getMessage() {

                    const loading = this.$loading({
                        lock: true,
                        text: '校验中',
                        background: 'rgba(255, 255, 255, 0.7)'
                    });

                    // 统计数量

                    await this.db.collection("operationUsers").count().then(async res => {

                        console.log("获取的数量为");

                        var total = res.total;

                        var getNumber = Math.ceil(total / Max_Get); //分批获取的次数

                        var oldData = [];

                        console.log(getNumber);

                        // 进行分批获取

                        for (let i = 0; i < getNumber; i++) {

                            await this.db.collection("operationUsers").skip(i * 20).get().then(res => {

                                    oldData = oldData.concat(res.data); //储存数据

                                }

                            )

                        }

                        //储存保存的数据

                        var dataArray = oldData

                        var arraryLength = oldData.length

                        this.usersInfo.splice(0, this.usersInfo.length)

                        for (let i = 0; i < arraryLength; i++) {

                            this.usersInfo.push(dataArray[i])

                        }

                        console.log(this.usersInfo);



                    })



                    this.list = this.usersInfo;

                    loading.close();

                }

                ,

                //判断邮箱

                checkinputEmail(email) {

                    let str = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;



                    if (str.test(email)) {



                        return true



                    } else {

                        return false

                    }

                },

                //添加用户

                async addUsers() {

                    var name = this.inputrealName

                    var _openid = this.inputopenid

                    var password = this.inputpassword

                    var department = this.inputdepartment

                    var Position = this.inputPosition

                    var email = this.inputemail

                    console.log(Position);

                    if (!name || !_openid || !password || !confirmPassword || !department || !Position || !department || !Position || !email) {



                        this.$message({

                            message: '请完善信息',

                            type: 'warning'

                        });

                    } else {

                        // 判断邮箱格式

                        let checkFormat = this.checkinputEmail(this.inputemail)

                        if (checkFormat) {

                            await this.db.collection("operationUsers").add(

                                {

                                    data: {

                                        realName: name,

                                        _openid: _openid,

                                        webPassword: password,

                                        department: department,

                                        Position: Position,

                                        email: email

                                    }

                                }

                            ).then(res => {

                                console.log(res);

                                if (res.errMsg = 'collection.add:ok') {

                                    this.$message({

                                        message: '添加成功',

                                        type: 'success'

                                    });

                                    //清除输入的东西

                                    this.resetInputMessage();

                                    this.Tab3()

                                }

                            })

                        } else {



                            this.$message({

                                type: 'error',

                                message: '邮箱格式有问题，请重新输入'

                            })

                        }



                    }

                },

                //搜索用户  ---by realName

                searchUser() {

                    var searchInfo = this.keyword

                    var inquiryInfo = searchInfo + '+.*';



                    console.log(inquiryInfo);

                    var db = this.db

                    this.db.collection("operationUsers").where({

                        realName: db.RegExp({

                            regexp: inquiryInfo,

                            option: 'i'

                        })

                    }).get().then(res => {

                        var dataArray = res.data;

                        //清空

                        this.usersInfo.splice(0, this.usersInfo.length)

                        console.log(this.usersInfo);

                        for (let i = 0; i < dataArray.length; i++) {

                            this.usersInfo.push(dataArray[i])

                        }

                    })



                }

                ,

                //修改用户信息

                changUser() {

                    this.db.collection('operationUsers').where({

                        _openid: this.openid

                    }).update({

                        data: {

                            realName: this.realName,

                            department: this.department,

                            Position: this.Position

                        }

                    }).then(res => {

                        console.log(res);

                        if (res.stats.updated) {

                            // window.alert("修改成功")

                            this.$message({

                                type: 'success',

                                message: '修改成功'

                            })

                            // 关闭窗口

                            // $(".modal").css('display', 'none')

                            this.showModal = false;

                            //修改后重新修改getmessage

                            this.getMessage();

                            this.renewList();



                        }

                    })

                },

                // 删除用户

                deleteUser(_openid, realName, index) {

                    console.log(_openid);

                    var message = "确认删除" + realName + "吗？"

                    this.$confirm(message, '提示', {

                        confirmButtonText: '确定',

                        cancelButtonText: '取消',

                        type: 'warning'

                    }).then(() => {



                        this.db.collection('operationUsers').where(

                            {

                                _openid: _openid

                            }).remove({

                            success: res => {

                                this.$message({

                                    type: 'success',

                                    message: '删除成功!'

                                });

                                console.log(res);

                                this.usersInfo.splice(index, 1)

                            }

                        })



                    }).catch(() => {

                        // this.$message({

                        //     type: 'info',

                        //     message: '已取消删除'

                        // });

                    });

                },

                alertWindows(_openid, realName, department, Position) {



                    // 显示

                    // $("#myModal").css('display', 'block');



                    // 关闭

                    // $(".close").bind("click", function () {

                    //     $("#myModal").css('display', 'none');





                    console.log(_openid);

                    // // })

                    this.showModal = true;

                    this.openid = _openid

                    this.realName = realName

                    this.department = department

                    this.Position = Position





                }

            },

            watch: {

                confirmPassword(newValue) {

                    console.log(newValue);

                    if (newValue != this.inputpassword) {

                        console.log('两次输入的密码不同');

                        $("#Tip").text("两次输入的密码不同")

                        $("#Tip").css("color", 'red')

                    } else {

                        $("#Tip").text("")

                    }

                },

                password(newValue) {

                    console.log(newValue);

                    if (newValue != this.confirmPassword) {

                        console.log('两次输入的密码不同');

                        $("#Tip").text("两次输入的密码不同")

                        $("#Tip").css("color", 'red')

                    } else {

                        $("#Tip").text("")

                    }

                },

                keyword: {

                    deep: true,

                    handler(val) {

                        console.log(val);

                        this.list = this.usersInfo.filter((p) => {

                            return ((p.realName ? (p.realName.indexOf(val) !== -1) : null) || (p.Position ? (p.Position.indexOf(val) !== -1) : null) || (p._openid ? (p._openid.indexOf(val) !== -1) : null))

                        })

                    }



                },

                //检测personinfo的变化

                personInfo: {

                    deep: true,

                    handler(val) {

                        this.list = this.personInfo

                    }

                }

            },

            computed: {





            },

            async created() {



                await this.initWx();

                this.checkCookie(); //必须在初始化后，因为要用到云数据库



                //获取列表数据

                this.getMessage();









            },

            mounted() {

                //一开始对list 进行初始化。

                this.list = this.usersInfo





            },

        })
    </script>

</scrri>



</html>